<template>
  <div class="home">
    <h3>这个是首页</h3>
    <button @click="toReplace">replace</button>
    <button @click="toHref">href</button>
    <button @click="isShow = !isShow">改变显隐</button>
    <button @click="handle">变</button>
    <button @click="slow">慢变</button>
    <input v-model="num" type="text">
    <keep-alive>
      <input type="text">
    </keep-alive>
    <p v-if="isShow">数据methods：{{myMethod()}}</p>
    <p v-if="isShow">数据computed：{{myComputed}}</p>
    <h1 class="animate__animated animate__bounce">An animated element</h1>
    <h1 id="run" class="animate__animated always__run">一直在动的动画</h1>
    <div id="change"> 222 </div>
    <transition>
      <div class="box animated bounceInDown">类名里面没有___</div>
    </transition>
  </div>
</template>

<script>
import anime from 'animejs/lib/anime.es.js';
export default {
  data () {
    return {
      change: '',
      num: 100,
      isShow: true
    }
  },
  computed: {
    myComputed: function () {
      console.log("这个是computed里面打印的");
      return this.num
    }
  },
  mounted () {
    anime({
      targets: '#run',
      translateX: 270,
      direction: 'reverse',
      loop: true,
      easing: 'easeInOutSine'
    });
  },
  methods: {
    toHref () {
      location.href = '#/about'
    },
    toReplace () {
      window.location.replace('#/about')
    },
    myMethod () {
      console.log("这个是myMehtods方法");
      return this.num
    },
    slow () {
      var change = document.getElementById('change')
      change.classList.add('animate__animated', 'animate__bounceOut', 'animate__slow', 'animate__delay-2s')
      change.addEventListener('animationend', () => {
        change.classList.remove('animate__animated', 'animate__bounceOut', 'animate__slow', 'animate__delay-2s')
      })
    },
    handle () {
      var change = document.getElementById('change')
      change.classList.add('animate__animated', 'animate__bounceOut', 'animate__faster')
      change.addEventListener('animationend', () => {
        change.classList.remove('animate__animated', 'animate__bounceOut', 'animate__faster')
      })
    }
  }
}
</script>
<style scoped>
</style>
